<template>
	<view class="regsiter_box">
		<form>
			<view class="regsiter-item">
				<text class="wenzi">手机号</text>
				<input v-model="userRegister.phone" type="tel" placeholder="请输入手机号" maxlength="11" />
			</view>
			<view class="regsiter-item">
				<text class="wenzi">密码</text>
				<input v-model="userRegister.password" type="password" maxlength="16" placeholder="请输入密码" />
			</view>
			<view class="regsiter-item">
				<text class="wenzi">验证码</text>
				<input v-model="userRegister.verificationCode" type="number" placeholder="请输入验证码" maxlength="6"
					pattern="[0-9]*" />
				<button class="reg_yzmBtn" @click="clickCode">{{verificationCodeText}}</button>
			</view>
			<view class="regsiter-item">
				<text class="wenzi">邀请码</text>
				<input v-model="userRegister.invitationCode" type="" placeholder="请输入邀请码" maxlength="6" />
			</view>
			<view class="registerBtn">
				<button type="default" @click="clickRegister">立即注册</button>
			</view>
			<view class="login-tips">
				已有账号?
				<text @click="LoginClick()">立即登录</text>
			</view>
		</form>
	</view>
</template>

<script>
	import {
		getMessageCode,
		register
	} from '@/request/api/login.js'

	export default {
		name: 'register',
		data() {
			return {
				duration: 60,
				enabled: true,
				timer: undefined,
				verificationCodeText: '获取验证码',
				userRegister: {
					phone: "",
					password: "",
					invitationCode: "",
					verificationCode: "",
					verificationKey: ""
				}
			}
		},
		methods: {
			Timeloop() {
				this.verificationCodeText = this.duration + 's'
				this.duration = this.duration - 1
				if (this.duration == 0) {
					this.duration = 60
					this.verificationCodeText = '获取验证码'
					clearInterval(this.timer)
					this.enabled = true
				}
			},
			startTimer() {
				this.enabled = false
				if (this.timer) {
					clearInterval(this.timer)
				}
				this.timer = setInterval(this.Timeloop, 1000, 60)
			},
			LoginClick() {
				uni.navigateTo({
					"url": "/pages/users/login"
				})
			},
			async clickCode() {
				if (!this.userRegister.phone || this.userRegister.phone.length == 0) {
					uni.showToast({
						title: '请输入手机号码',
						icon:'error'
					})
					return
				}
				if (!this.enabled) {
					return
				}
				const phone = await this.userRegister.phone
				const res = await getMessageCode({
					phone
				})
				if(res.code==0){
					this.enabled = false
					this.startTimer()
				}
			},
			async clickRegister() {
				const res = await register(this.userRegister)
				if (res.code == 0) {
					uni.navigateBack()
				}
			},
		},
		destroyed() {
			if (this.timer) {
				clearInterval(this.timer)
			}
		}
	}
</script>

<style>
	.regsiter_box {
		background-color: #fff;
		display: flex;
		flex-direction: column;
	}

	.regsiter-item {
		align-items: center;
		margin: 0 16px;
		border-bottom: 0.5px solid #eee;
		height: 64px;
		position: relative;
		display: flex;
		flex-direction: row;
	}

	.regsiter-item .wenzi {
		font-size: 14px;
		color: #333;
		width: 106px;
	}

	.regsiter-item input {
		font-size: 14px;
		color: #555;
		margin-left: 16px;
	}

	.reg_yzmBtn {
		height: 25px;
		line-height: 25px;
		background: #2c7fd9;
		border-radius: 13px;
		position: absolute;
		right: 0;
		font-size: 13px;
		color: #fff;
	}

	.registerBtn {
		margin: 20px 20px;
	}

	.registerBtn button {
		background-color: #2866f9;
		color: white;
	}

	.login-tips {
		margin: 21px auto;
		text-align: center;
		font-size: 14px;
		color: #333;
	}

	.login-tips text {
		color: #2c7fd9;
	}
</style>